<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<!--本例中: 因为要反复生成多个li，所以v-for要写在li上，而不是li的父元素ul上-->
				<li v-for="(item,j) of cellphone">
					手机品牌{{j+1}}: {{item}}
				</li>
			</ul>

			<ul>
				<li v-for="(value,key1) of goods" :key="key1">
					{{key1}} :{{value}}
				</li>
			</ul>


			<ul style="list-style: none; border: 1px solid #90EE90;">
				<li v-for="i of pageCount" :key="i" style="float: left;">{{i}} | </li>
			</ul>

			<h3>案例4</h3>
			<h3>总计: ¥{{total.toFixed(2)}}</h3>
			<ul>
				<li v-for="(item,i) of cart" :key="i">
					{{item.pid}} | {{item.pname}} | ¥{{item.price.toFixed(2)}} |
					{{item.count}} —— 小计：¥{{(item.price*item.count).toFixed(2)}}
				</li>
			</ul>
			<h3>总计: ¥{{total.toFixed(2)}}</h3>
		</div>
		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					cellphone: ["华为", "苹果", "小米", "三星"],

					goods: {
						id: 11,
						name: "华为手机",
						title: "2022新款 爆销售202220222022",
						price: 12.78,
					},

					pageCount: 7,
					cart: [{
							pid: 1,
							pname: "华为",
							price: 4455,
							count: 2
						},
						{
							pid: 2,
							pname: "小米",
							price: 3455,
							count: 1
						},
						{
							pid: 3,
							pname: "OPPO",
							price: 3356,
							count: 3
						},
					],
				},


				computed: {
					//属性，所以用法同属性的用法——一定不要不加()				
					total() {
						console.log("调用了一次total()");
						let sum = 0;
						for (let p of this.cart) {
							sum += p.price * p.count;
						}
						return sum;
				 },
				},
			});
		</script>
	</body>
</html>
